<template>
  <div class="view">
    <el-row class="handle-box" :model="filters">
      <span>{{ $t("welllist.wellstate") }}：</span>
      <el-select
        v-model="filters.wellstate"
        filterable
        @change="search"
        :placeholder="$t('welllist.wellstate')"
      >
        <el-option
          v-for="item in optionwellstatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span>{{ $t("welllist.welltype") }}：</span>
      <el-select
        v-model="filters.welltype"
        clearable
        filterable
        @change="search"
        :placeholder="$t('welllist.welltype')"
      >
        <el-option
          v-for="item in optionwelltype"
          :key="item.value"
          :label="item.label"
          :value="item.label"
        >
        </el-option>
      </el-select>

      <span>{{ $t("welllist.wellname") }}：</span>
      <el-input
        v-model="filters.searchname"
        @keyup.native.enter="search"
        :placeholder="$t('public.text')"
        clearable
      ></el-input>
      <el-button class="seacths" type="primary" id="btn" @click="search" icon="el-icon-search"
        >{{$t("public.search")}}</el-button
      >
    </el-row>
    <div class="tablebox">
      <template>
        <el-table :data="tables" size="mini" stripe class="tablefisbox">
          <el-table-column type="index" :label="$t('public.number')" width="100" align="center">
          </el-table-column>
          <el-table-column
            prop="wellId"
            min-width="70"
            :label="$t('dataBoard.wellName')"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="platform" :label="$t('dataBoard.platformName')" align="center">
          </el-table-column>
          <el-table-column prop="totDepth" :label="$t('dataBoard.totDepth')" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.totDepth + "M" }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="tvdDepth" :label="$t('dataBoard.tvdDepth')" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.tvdDepth + "M" }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="bitDepth" :label="$t('dataBoard.bitDepth')" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.bitDepth + "M" }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="spudDate" :label="$t('dataBoard.drillingTime')" align="center">
          </el-table-column>
          <el-table-column prop="wellType" :label="$t('welllist.welltype')" align="center">
          </el-table-column>
          <el-table-column prop="wellState" :label="$t('public.wellState')" align="center">
          </el-table-column>
          <el-table-column :label="$t('public.operation')" width="250" align="center">
            <template slot-scope="scope">
              <el-button
                type="danger"
                round
                size="mini"
                @click="cancelcoll(scope.$index, scope.row)"
                >{{ $t("public.collection") }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--工具条-->
      <el-col class="pages">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pageSize"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        wellstate: 0,
        welltype: "",
        searchname: "",
      },
      // tables: [],  //表格数据
      total: 0, //总共条数
      page: 1, //请求页
      limit: 10, //页条数
      pageSize: 1, //当前页
      // pageTotal: 0,
      optionwellstatus: [
        {
          value: 0,
          label: "实时井",
        },
        {
          value: 1,
          label: "历史井",
        },
      ],
      optionwelltype: [
        {
          value: 1,
          label: "勘探井",
        },
        {
          value: 2,
          label: "开发井",
        },
        {
          value: 3,
          label: "调整井",
        },
      ],
      tables: [],
    };
  },
  watch: {
    "filters.searchname"(val) {
      if (val.trim() === "") {
        this.getWellColl();
      }
    },
  },
  mounted() {
    this.getWellColl();
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.getWellColl();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.pageSize = val;
      this.getWellColl();
    },
    //模糊搜索
    search() {
      this.page = 1;
      this.limit = 10;
      this.pageSize = 1;
      this.getWellColl();
    },
    //获取
    async getWellColl() {
      try {
        let params = {
          usid: JSON.parse(this.$store.state.userInfo).uid,
          state: this.filters.wellstate,
          welltype: this.filters.welltype,
          wellname: this.filters.searchname,
          page: this.page,
          limit: this.limit,
        };
        let res = await this.$api.collection.getWellColl(params);
        this.tables = res.data;
        this.total = res.count;
      } catch (e) {
        console.log(e);
      }
    },
    // 取消收藏
    cancelcoll(index, row) {
      // 二次确认删除
      this.$confirm(
        this.$t("public.confirmCancelCollection"),
        this.$t("public.confirmtitle"),
        {
          type: "warning",
        })
        .then(async () => {
          let params = {
            usid: JSON.parse(this.$store.state.userInfo).uid,
            wellid: row.wid,
          };
          let res = await this.$api.collection.cancelcoll(params);
          if (res.code == 200) {
            this.$message.success(this.$t("public.cancelSuccess"));
            this.getWellColl();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch(() => {});
    },
  },
};
</script>